<template>
  <div id="bq">
    <div class="leibie">
      <dl class="footer-article-item">
        <dt>买房</dt>
        <dd>
          <a href="#">新房</a> <a href="#">二手房</a>
        </dd>
        <dd>
          <a href="#">业主论坛</a> <a href="#">海外房产</a>
        </dd>
      </dl>
      <dl class="footer-article-item">
        <dt>卖房</dt>
        <dd>
          <a href="#">我要卖房</a> <a href="#">查房价</a>
        </dd>
      </dl>
      <dl class="footer-article-item">
        <dt>租房</dt>
        <dd>
          <a href="#">找租房</a> <a href="#">品牌公寓</a>
        </dd>
      </dl>
      <dl class="footer-article-item">
        <dt>装修</dt>
        <dd>
          <a href="#">装修报价</a> <a href="#">装修美图</a>
        </dd>
        <dd>
          <a href="#">红包优惠</a> <a href="#">装修店铺</a>
        </dd>
      </dl>
      <dl class="footer-article-item">
        <dt>商用</dt>
        <dd>
          <a href="#">商铺出售</a> <a href="#">写字楼出售</a>
        </dd>
        <dd>
          <a href="#">商铺出租</a> <a href="#">写字楼出租</a>
        </dd>
      </dl>
    </div>

    <!-- 展示 -->
    <div class="zs">
      <ul class="bt">
        <li><a href="">热销楼盘</a></li>
        <li><a href="">品牌地产</a></li>
        <li><a href="">新盘推荐</a></li>
      </ul>
      <div class="images">
        <div class="dyz">
          <div id="s1">
            <img src="../../../images/tj1.jpg" />
            <div class="zm">
              <span>价格代定</span>
              <a id="lj" href="" target="_blank">查看详情</a>
              <div id="t2">
                <div><a href="" target="_blank">待售</a></div>
                <div><a href="" target="_blank">普通住宅</a></div>
              </div>
            </div>
          </div>
          <div id="s1">
            <img src="../../../images/tj1.jpg" />
             <div class="zm">
               <span>价格代定</span>
               <a id="lj" href="" target="_blank">查看详情</a>
               <div id="t2">
                 <div><a href="" target="_blank">待售</a></div>
                 <div><a href="" target="_blank">普通住宅</a></div>
               </div>
            </div>
          </div>
          <div id="s1">
            <img src="../../../images/tj1.jpg" />
            <div class="zm">
              <span>价格代定</span>
              <a id="lj" href="" target="_blank">查看详情</a>
              <div id="t2">
                <div><a href="" target="_blank">待售</a></div>
                <div><a href="" target="_blank">普通住宅</a></div>
              </div>
            </div>
          </div>
          <div id="s1">
            <img src="../../../images/tj1.jpg" />
            <div class="zm">
              <span>价格代定</span>
              <a id="lj" href="" target="_blank">查看详情</a>
              <div id="t2">
                <div><a href="" target="_blank">待售</a></div>
                <div><a href="" target="_blank">普通住宅</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {

    }
  };
</script>

<style lang="css" scoped="scoped">
  .footer-article-item {
    width: 200px;
    height: 200px;
    display: inline-block;
    line-height: 2;
    font-size: 14px;

  }

  .footer-article-item dt {
    display: inline-block;
    color: #DF2F30;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 2;
    margin-left: 45px;
    white-space: nowrap;

  }

  .footer-article-item dd {
    line-height: 2;
  }
  .leibie{
    width: 1450px;
  }

  .footer-article-item dd a {
    color: black;
    transition: all .1s;
    text-decoration: none;
    font-size: 12px;
    margin-left: 10px;
  }

  .footer-article-item dd a:hover {
    color: #DF2F30;
    text-decoration: underline;
  }

  #bq {
    width: 100%;
    text-align: center;
    margin: 0, auto;
    margin-top: -40px;

  }

.bt{
  width: 1420px;
}
  .zs .bt li {
    width: 400px;
    height: 50px;
    margin: 0;
    display: inline-block;
    text-align: center;
    line-height: 3;
    background-color: #F3F3F3;

  }

  .zs .bt li:hover {
    font-weight: bold;
    border-bottom-color: red;
  }

  .zs .bt li a {
    color: black;
    text-decoration: none;


  }

  .zs {
    /* white-space:nowrap; */
    height: 325px;
    margin-top: -120px;
  }

  .images .dyz {
    display: inline-block;
  }

  .images .dyz #s1 {
    width: 290px;
    height: 190px;
    display: inline-block;
  }

  .images .dyz #s1 img {
    width: 270px;
    height: 165px;

  }

#gl{
  display: inline-block;
}
 #t2 div {
    display: inline-block;
    width: 58px;
    height: 22px;
    border: solid #DDDDDD 1px;
    font-size: 12px;
    background-color: ;
    text-align: center;
    line-height: 2;
    margin-top: 10px;

  }

  .zm span {
    color: #DE3438;
  }

  .zm #lj {
    margin-left: 60px;
  }

  .zm #lj:hover {
    color: #DE3438;
  }
</style>
